import React, { useState,useEffect } from 'react';
import { Table, Form, Button } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import styles from './styles.module.scss';



const mapStateToProps = state => ({ memberList: state.adminPage.memberList });

const mapDispatchToProps = dispatch => {
    return {
        getMemberList: dispatch.adminPage.getMemberList
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(({ memberList, getMemberList }) => {
    console.log(memberList);
    const loading = memberList.length === 0;
    const tableColumn = [
        {
            title: '用户名',
            key: 'username',
            dataIndex: 'username',
        },
        {
            title: '地址',
            key: 'address',
            dataIndex: 'address',
        },
        {
            title: '负责人',
            key: 'name',
            dataIndex: 'name'
        },
        {
            title: '权限',
            key: 'role',
            dataIndex: 'role'
        },
        {
            title: '单位',
            key: 'unitName',
            dataIndex: 'unitName'
        },
        {
            title: '操作',
            key: 'action',
            dataIndex: 'action'
        }
    ];

    useEffect(() => {
        getMemberList();
    }, []);

    return (
        <div className={ styles.container }>
            <Form layout="inline">
                <Form.Item>
                    <Button>添加用户</Button>
                </Form.Item>
            </Form>
            <Table className={ styles.table } loading={ loading } dataSource={ memberList } bordered columns={ tableColumn }/>
        </div>
    );
}));
